<template>
  <a-modal title="关联需求" width="800px" v-model:visible="open" @ok="handleConnect" @cancel="hideModal">
    <div class="table-header" style="margin-bottom: 20px">
      <a-input v-model:value="keyWord" placeholder="请输入需求名称" style="width: 200px; margin-right: 20px" />
      <a-button type="primary" @click="searchParams">搜索</a-button>
    </div>
    <a-table :defaultExpandAllRows="true" :loading="loading" :dataSource="list" :columns="columns" :pagination="pagination" @change="handleTableChange">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'action'">
          <a @click="onRelevance(record)" v-if="!isConnect(record)">关联</a>
          <a @click="onRelevance(record)" v-else>已关联</a>
        </template>
      </template>
    </a-table>
  </a-modal>
</template>
<script lang="ts" setup>
  import message from 'ant-design-vue/es/message'
  import { computed, onMounted, ref, watch } from 'vue'

  import { getRequireList } from '/@/api/exchange/requirement'

  const columns = [
    { title: '需求名称', dataIndex: 'requireName' },
    // { title: '发布人', dataIndex: 'createdName' },
    { title: '发布时间', dataIndex: 'requireTime' },
    { title: '操作', dataIndex: 'action' },
  ]
  const emit = defineEmits<{
    (event: 'getRelevanceList', list: RequirementTypes.IResponse[]): void
  }>()
  type ListProps = {
    selectList: RequirementTypes.IResponse[]
  }
  /* 父组件参数 */
  const props = defineProps<ListProps>()

  const open = ref<boolean>(false)
  const keyWord = ref<string>()
  const list = ref<RequirementTypes.IResponse[]>([])
  const relevanceList = ref<RequirementTypes.IResponse[]>([])
  const loading = ref<boolean>(false)
  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 5,
  })

  const page = computed(() => ({
    pageIndex: pagination.value.current,
    pageSize: pagination.value.pageSize,
  }))

  // 分页查询
  const handleTableChange: TableProps['onChange'] = (tabPage: TablePaginationConfig) => {
    pagination.value.current = tabPage.current || 1
    pagination.value.pageSize = tabPage.pageSize || 5
    getData()
  }
  // 获取页面list
  const getData = async () => {
    loading.value = true
    const params = {
      ...page.value,
      ...{
        keyWord: keyWord.value,
      },
    }
    const { responseData } = await getRequireList(params)
    if (responseData.list && responseData.list.length) {
      list.value = responseData.list.map((item) => {
        const _item: any = {
          ...item,
          requireId: item.id,
          requireTime: item.createdTime,
        }
        delete _item.id
        delete _item.createdTime
        return _item
      })
    } else {
      list.value = []
    }
    pagination.value.total = +responseData.total || 0
    loading.value = false
  }
  const searchParams = () => {
    pagination.value.current = 1
    pagination.value.pageSize = 5
    getData()
  }

  // 关联
  const onRelevance = (record: RequirementTypes.IResponse) => {
    const _index = relevanceList.value.findIndex((item) => item.requireId === record.requireId)
    if (_index > -1) {
      relevanceList.value.splice(_index, 1)
    } else {
      relevanceList.value.push(record)
    }
  }

  const isConnect = (record: RequirementTypes.IResponse) => {
    if (relevanceList.value.findIndex((item) => item.requireId === record.requireId) > -1) {
      return true
    } else {
      return false
    }
  }

  // 打开弹窗
  const showModal = () => {
    open.value = true
    if (props.selectList && props.selectList.length) {
      relevanceList.value = JSON.parse(JSON.stringify(props.selectList))
    } else {
      relevanceList.value = []
    }
  }

  // 关闭弹窗
  const hideModal = () => {
    relevanceList.value = []
    open.value = false
    loading.value = false
  }

  const handleConnect = () => {
    emit('getRelevanceList', relevanceList.value)
    hideModal()
  }

  onMounted(() => {
    relevanceList.value = props.selectList && props.selectList.length ? props.selectList : []
  })

  defineExpose({
    showModal,
    getData,
  })
</script>
<style lang="less" scoped></style>
